<script setup lang="ts">
import { reactive,defineProps } from "vue";
import { Message } from "@arco-design/web-vue";
import XLSX from "xlsx-js-style";
import {IconDownload } from "@arco-design/web-vue/es/icon";

const props = defineProps({
  msg: String,
  data: Array,
  filename:  String,
  columns: Array
})

const localdata = reactive([
  {
    key: '1',
    name: "Jane Doe",
    age: 23,
    birthDate: "1990-06-06"
  },
  {
    key: '2',
    name: "Alisa Ross",
    age: 26,
    birthDate: "1990-06-06"
  }
]);

const handleClick = () => {
  // 测试使用xlsx 准备数据
  Message.info("开始下载数据s" +  props.filename);
  console.log(props.columns);
  

  // 创建工作表,二维数组生成电子表格
  const worksheet = XLSX.utils.aoa_to_sheet(props.data);

  // 设置边框样式
  const cellStyle = {
    border: {
      top: { style: "thin", color: { rgb: "000000" } }, // 上边框：细线黑
      left: { style: "thin", color: { rgb: "000000" } }, // 左边框
      bottom: { style: "thin", color: { rgb: "000000" } }, // 下边框
      right: { style: "thin", color: { rgb: "000000" } }, // 右边框
    },
    alignment: {
      horizontal: "center",
      vertical: "center",
    },
    font: {
      name: "Arial", // 字体名称
      sz: 12, // 字号大小
      bold: false, // 是否加粗
      color: { rgb: "FF0000FF" }, // 可选：字体颜色（此处为蓝色）
    },
  };
  // 表头样式（加粗、字号加大）
  const headerCellStyle = {
    ...cellStyle,
    font: {
      ...cellStyle.font,
      sz: 14,
      bold: true,
    },
  };

  // 遍历整个数据区域并设置边框
  for (let rowIndex = 0; rowIndex < props.data.length; rowIndex++) {
    // 遍历某行中的每一列
    for (let colIndex = 0; colIndex < props.data[0].length; colIndex++) {
      const cellAddress = XLSX.utils.encode_cell({ r: rowIndex, c: colIndex });
      //
      if (!worksheet[cellAddress]) worksheet[cellAddress] = {};
      // 如果是第一行，应用表头样式
      worksheet[cellAddress].s = rowIndex === 0 ? headerCellStyle : cellStyle;
    }
  }
  // 设置列宽（单位：字符宽度，1单位=约7像素）
  worksheet["!cols"] = [
    { wch: 15 }, // 第一列宽度为15字符
    { wch: 10 }, // 第二列宽度为10字符
    { wch: 20 }, // 第三列宽度为20字符
  ];

  // 设置行高（单位：磅）
  worksheet["!rows"] = [
    { hpt: 40 }, // 第一行高度为20磅
    { hpt: 30 }, // 第二行高度为18磅
    { hpt: 30 }, // 第三行高度为18磅
    { hpt: 30 }, // 第四行高度为18磅
  ];
  // 合并 E1:G3 区域
worksheet["!merges"] = [
  {
    s: { r: 0, c: 4 },   // 起始单元格（行0，列4 -> E1）
    e: { r: 2, c: 6 }    // 结束单元格（行2，列6 -> G3）
  }
];

  const workbook = XLSX.utils.book_new();

  XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");

  // 导出文件（浏览器下载）
  XLSX.writeFile(workbook, "模版数据.xlsx");
};
</script>

<template>
  <a-button type="primary" @click="handleClick">
    <template #icon>
        <icon-download />
      </template>
      <template #default>下载模板文件</template>  </a-button>

  <a-divider />
  <div>
    <!-- :data="data" -->
    <a-table :columns="props.columns" :data="localdata" />
  </div>
</template>

<style lang="scss" scoped></style>
